<script lang="ts" setup name="ProcureTotal">
import { ProTableInstance } from '~/library/components/ProTable/interface'
import { procureType } from '~/src/utils/serviceDict'

const initParams = reactive({
  type: 0,
})

const handleClick = (e: any) => {
  initParams.type = e
  nextTick(() => {
    // tableRefList.value![e].getTableList()
  })
}
const tableRefList = ref<ProTableInstance[]>([])
const setInput = (el: any, index: number) => {
  tableRefList.value![index] = el
}

const dataCallback = (data: any) => {
  return {
    list: data.list,
    total: data.total,
    pageNum: data.pageNum,
    pageSize: data.pageSize,
  }
}
</script>
<!-- 设置动态ref -->
<template>
  <div class="auto-height-container">
    <el-tabs v-model="initParams.type" class="demo-tabs" @tab-change="handleClick">
      <el-tab-pane v-for="(item, index) in procureType" :key="item.value" :label="item.label" :name="item.value">
        <div v-if="index === initParams.type" class="main-box">
          <pro-table
            :ref="(el) => setInput(el, index)"
            :columns="item.columns"
            :data-callback="dataCallback"
            :indent="20"
            :initParam="initParams"
            :isCard="false"
            :request-api="item.api"
            row-key="id"
            :title="item.label + '充值规则列表'"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style lang="scss" scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
